// lazy 创建异步组件 用时才会加载 Suspense react内置组件
import {Component,lazy,Suspense} from 'react';
import Child from './Components/Child';
// 引入axios 
import axios from 'axios';
import Headers from './Components/Header';
import One from './Components/One';
import Two from './Components/Two'
// import AsyncComponent from './Components/01_异步组件';
let AsyncComponent = lazy(()=>import("./Components/01_异步组件"))
class App extends Component{
    state  = {
        isShow:false
    }
    render(){
        return(
            <div>
               <h1>hello world axios!!!</h1> 
               <button onClick={()=>this.sendGet()}>发送get请求</button>
               <button onClick={()=>this.sendPost()}>发送post请求</button>
               <button onClick={()=>this.sendConfig()}>配置axios发送请求</button>
               <Child/>
               <Headers/>
               <hr />
                {
                    this.state.isShow && <Suspense fallback={"loading..."}><AsyncComponent/></Suspense>
                }
                <button onClick={()=>{
                    this.setState({
                        isShow:true
                    })
                }}>显示</button>
                <hr />
                <One></One>
                <Two></Two>
            </div>
        )
    }
    sendGet(){
        // axios可以直接发送get请求 参数一请求地址 请求参数可以拼接到路径上?参数名=值&参数名=值
        // axios.get('https://apif.java.crmeb.net/api/front/index/product/1/?pag=1&limit=10').then((res)=>{
        //     console.log(res.data)
        // })
        // axios get请求另一种写法 参数一 请求地址 参数二 对象 对象中params属性用来存放get请求参数
        axios.get('https://apif.java.crmeb.net/api/front/index/product/1/',{
            params:{
                page:1,
                limit:10
            }
        }).then(res=>{
            console.log(res.data)
        })
    }
    sendPost(){
        // axios发送post请求 参数一请求地址 参数二请求参数
        axios.post("http://119.3.122.213:8090/api/private/v1/login",{
            username:"admin",
            password:"123456"
        }).then(res=>{
            console.log(res.data)
        }).catch(err=>{
            console.log(err)
        })
        // axios发送put请求参数一 请求地址 参数二请求参数
        // axios.put()
        // axios.delete()

    }
    sendConfig(){
        // axios({
        //     // 请求地址
        //     url:"http://119.3.122.213:8090/api/private/v1/login",、
        //     //请求方式
        //     method:"post",
        //     // post请求参数
        //     data:{
        //         username:"admin",
        //         password:"123456" 
        //     },
        //     timeout:6000
        // }).then(res=>{
        //     console.log(res.data)
        // })
        axios({
            url:"https://apif.java.crmeb.net/api/front/index/product/1/",
            method:"get",
            // get请求参数
            params:{
                page:1,
                limit:10
            }
        }).then(res=>{
            console.log(res)
        })
    }
}
export default App;